<script>
import axios from "axios";

export default {
  data(){
    return {
      pageDto:{
        pageSize:2,
        pageNum:1
      },
      recycleBinList:[],
      total:0,
      pages:0,
    }
  },
  methods:{
    getData:function(){
      axios.get("/oa/document/recycleBinSel",{params:this.pageDto}).then((res)=>{
        console.log(res.data.data)
        this.pageDto.pageNum=res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total=res.data.data.total;
        this.pages=res.data.data.pages;
        this.recycleBinList=res.data.data.list;
      })
    },
    Restore(index, row) {
      this.$confirm('确定还原吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.put(`/oa/document/recycleBinRestore/${row.documentId}`)
            .then((data) => {
              this.$message({
                type: 'success',
                message: '还原成功!'
              });
              this.getData()
            })
            .catch((error) => {
              console.log(error)
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    },
    deleteDocumentRecycleBin(index, row) {
      //   提示框
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/document/deleteDocumentRecycleBin/${row.documentId}`)
            .then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            })
            .catch((error) => {
              console.log(error)
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )}
  },
  created() {
    this.getData();
  }
}
</script>

<template>
  <div class="titleBox"  style="
  border-bottom: darkgray 1px solid;
  line-height: 40px;
  font-weight: bold;">文档回收站</div>
  <div>
    <!-- 首页表格信息显示 -->
    <el-table :data="recycleBinList" style="width: 100%">

      <el-table-column label="名称">
        <template #default="scope">
          <div style="display: flex; align-items: center">

            <span style="margin-left: 10px">{{ scope.row.title}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="类型">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.documentType }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所有者">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.realName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="删除时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.updatedAt }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
            <el-button size="small" @click="Restore(scope.$index, scope.row)">
              还原
            </el-button>

          <el-button size="small" type="danger" @click="deleteDocumentRecycleBin(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页-->
    <el-pagination
        v-model:current-page="this.pageDto.pageNum"
        :page-size="this.pageDto.pageSize"
        :pager-count="this.pages"
        layout="prev, pager, next"
        :total="this.total"
        @current-change="getData"
    />
  </div>
</template>

<style scoped lang="less">

</style>
